<template>
  <div id="app">
    <el-container style="background: url(http://rww08uahf.hn-bkt.clouddn.com/0dd8ed5b730c4df7babec5898c4b641c.png);">


      <!--抬头开始-->
      <el-header>
        <Top/>
      </el-header>
      <!--抬头结束-->
      <el-container >
        <!--内容开始-->
        <el-main>
          <div class="main">
            <el-menu mode="horizontal"
                     default-active="0" active-text-color="gold" text-color="white"
                     background-color="transparent" @select="categorySelect">
              <el-menu-item index="0">全部</el-menu-item>
              <el-menu-item v-for="c in categoryData"
                            :index="c.id">{{ c.modelName }}
              </el-menu-item>
            </el-menu>
            <el-row>
              <el-col v-for="b in blogData">
                <el-card class="card" style="margin-bottom: 5px;background-color: rgba(255,255,255,70%)">
                  <el-row>
                    <el-col span="6">
                      <a @click="toDetail(b.id,b.userId)">
                        <img :src='b.blogImg' style="width: 220px;height: 140px;">
                      </a>
                    </el-col>
                    <el-col span="18">
                      <a @click="toDetail(b.id,b.userId)">
                        <p class="title_p">
                          <span class="title_span">{{ b.blogTitle }}</span>
                        </p>
                      </a>
                      <div>
                        <a @click="toOtherUser(b.userId)">
                          <span style="color: #0a001f;">作者:{{ b.name }}</span>
                        </a>
                      </div>
                      <div style="margin-top: 30px;">
                        <span><img src="../../assets/zan.png" style="width: 16px;height: 16px;">{{ b.likes }}赞</span>
                        <span style="margin-left: 30px;"><i class="el-icon-star-off"></i>{{ b.collects }}收藏</span>
                        <span style="margin-left: 30px;"><i class="el-icon-view"></i>{{ b.visit }}浏览量</span>
                        <span style="margin-left: 30px">#{{ b.typeName }}</span>
                        <span style="margin-left: 30px;"><i class="el-icon-time"></i>{{ b.createTime }}</span>
                      </div>
                    </el-col>
                  </el-row>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-main>
        <el-aside style="width: 400px;">
          <div style="margin-top: 125px;margin-bottom: 20px;">
              <el-card style="background-color:transparent;">
                  <b><p style="text-align: center;font-size: 15px;text-shadow: -3px -3px 10px white, 3px 3px 10px black;color: white">限时积分领取</p></b>
            <el-card style="margin-top:10px;width: 360px;padding: 0;text-align: center;background-color: rgba(255,255,255,60%)"
                     v-for="i in integralList" v-show="isShow">
              <img src="http://rww08uahf.hn-bkt.clouddn.com/%E7%A7%AF%E5%88%86%E5%8E%9F%E7%9F%B3.png" class="image">
              <div style="padding: 0;">
                <span>{{ i.introduce }}</span>
                <p>{{ i.eachNumber }}积分</p>
                <p style="font-size:5px">剩余{{ i.inv }}份</p>
                <div class="bottom clearfix">
                  <p>开始:{{ i.startTime }}</p>
                  <p style="color:red;">截止:{{ i.endTime }}</p>
                  <hr>
                  <el-button style="position: relative" type="text" class="button" @click="addIntegral(i.id)">领取
                  </el-button>
                </div>
              </div>
            </el-card>
            <el-card style="margin-top:10px;width: 350px;padding: 0;text-align: center"
                     v-for="i in integralListToStar" v-show="show">
              <img src="http://rww08uahf.hn-bkt.clouddn.com/%E7%A7%AF%E5%88%86%E5%8E%9F%E7%9F%B3.png" class="image">
              <div style="padding: 0;">
                <span>{{ i.introduce }}</span>
                <p>{{ i.eachNumber }}积分</p>
                <p style="font-size:5px">剩余{{ i.inv }}份</p>
                <div class="bottom clearfix">
                  <p>活动即将开始</p>
                  <p>开始时间:{{ i.startTime }}</p>
                </div>
              </div>
            </el-card>
              </el-card>
          </div>
        </el-aside>
        <!--内容结束-->
      </el-container>
      <!--底部开始-->
      <Bottom/>

      <!--底部结束-->
    </el-container>
  </div>
</template>

<script>
import Top from '@/components/Top.vue'
import Bottom from "@/components/Bottom.vue";
import axios from "axios";
import '@/api/request'
export default {
  components: {
    Top,
    Bottom,
  },
  data: function () {
    return {
      user: '',
      loginUserId: '',
      blogData: [],
      categoryData: [],
      categoryArr: [],
      integralList: [],
      integralListToStar:[],
      isShow: true,
      show:true
    }
  },

  methods: {


    toOtherUser(userId) {
      if (this.user===null){
        this.$message.info("登录后可访问,请先登录!");
        return;
      }
      if (userId === this.loginUserId) {
        window.location.href = "personalCenter.html";
      }else {
        localStorage.setItem('userId', userId);
        window.location.href = "otherUserCenter.html"
      }
    },

    toDetail(id,userId) {
        if(this.user===null){
            this.$message.info("登录后可访问,请先登录!");
            return;        }
      localStorage.setItem('id', id);
        localStorage.setItem('userId', userId);
        window.location.href = "detail.html"
    },
    addIntegral(id) {
      if (JSON.parse(localStorage.getItem("user")) == null) {
        alert('请先登录');
        return;
      }
      let url = 'http://localhost:8088/integralDetail/seckill/' + id;
      axios.post(url).then((response) => {
        console.log(response.data)
        let jsonResult = response.data;
        if (jsonResult.code == 1) {
            this.$alert('恭喜你，领取成功！！', '限时积分领取', {
                confirmButtonText: '确定',
                callback: action => {
                    window.location.href = "index.html";

                }
            });
        } else {
            this.$alert(jsonResult.msg, '限时积分领取', {
                confirmButtonText: '确定',
                callback: action => {
                    window.location.href = "index.html";
                }
            });

        }
      });
    },
    loadListOfToStart(){
      let url = 'http://localhost:8088/userIntegral/listOfToStart';
      axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.code == 1) {
          this.integralListToStar = jsonResult.data;
        }
        if (jsonResult.data==="暂无积分秒杀活动！"){
          this.show = false
        }
      });
    },
    loadIntegral() {
      let url = 'http://localhost:8088/userIntegral/list';
      axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.code == 1) {
          this.integralList = jsonResult.data;
        }
        if (jsonResult.data === "该时段暂无积分秒杀活动！") {
          this.isShow = false
        }
      });
    },
    categorySelect(key, keyPath) {
      this.loadContent(key);
      if (key == 0) {
        this.loadBlogList();
      }
    },
    loadContent(categoryId) {
      let url = 'http://localhost:8088/blog/selectBlogByType/' + categoryId;
      axios.get(url).then((response) => {
        console.log(response.data)
        let jsonResult = response.data;
        if (jsonResult.code == 1) {
          this.blogData = jsonResult.data;
        }
      });
    },
    loadCategoryList() {
      let url = 'http://localhost:8088/blogType/list'
      axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.code == 1) {
          this.categoryData = jsonResult.data;
        }
      });
    },
    loadBlogList() {
      let url = 'http://localhost:8088/blog/selectAllBlog'
      axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.code == 1) {
          this.blogData = jsonResult.data;
        } else {
          this.$message("服务异常，请稍后重试！")
        }
      });
    },
  },
  created() {
    this.loadBlogList();
    this.loadCategoryList();
    this.loadIntegral();
    this.loadListOfToStart();
    this.user = localStorage.user ? JSON.parse(localStorage.user) : null;
    this.loginUserId = this.user.id;
  }
}
</script>

<style>
@import url(//at.alicdn.com/t/c/font_4004562_b46lfqtm52u.css);
body {
    margin: 0;

}

.shadow {
    box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06);
}

::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 4px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius   : 10px;
    background-color: #1d2d44;
    background-image: -webkit-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.2) 75%,
            transparent 75%,
            transparent
    );
}
::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #ededed;
    border-radius: 10px;
}


.el-message {
  top: 100px !important;
}

.main {
  margin: 30px;
  width: 1000px;
}

.card:hover {
  background-color: #f0f0f2;
}

.body-bg {
    background-attachment: fixed;
    overflow: hidden;
}
a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  cursor: pointer;
}

.title_p {
  font-size: 30px;
  font-weight: 500;
  color: #222226;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  margin-top: 4px;
  margin-bottom: 20px;
}

.title_span {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: PingFang SC, Hiragino Sans GB, Arial, Microsoft YaHei, Verdana, Roboto, Noto, Helvetica Neue, sans-serif;
}

.right-card .el-card__body { /**/
  padding: 0; /*去掉card自带内边距*/
}

.image {
  width: 30px;
  height: 30px;

}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  padding: 0;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
